<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Trip app</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav>
    <ul>
      <li><a href="#list">List Page</a></li>
      <li><a href="#info">Info Page</a></li>
    </ul>
  </nav>
  <section id="list">
    <ul>
      <li>
        <div class="row_container">
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></svg>
          </div>
          <div class="bg"></div>
          <div class="row">
            <div class="entry_container">
              <div class="entry"> Brazil, Swipe me right ==></div>
            </div>
          </div>

        </li>
      <li>
        <div class="row_container">
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></svg>
          </div>
          <div class="bg"></div>
          <div class="row">
            <div class="entry_container">
              <div class="entry"> Mexico, Swipe me right ==></div>
            </div>
          </div>
      </li>
      <li>
        <div class="row_container">
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></svg>
          </div>
          <div class="bg"></div>
          <div class="row">
            <div class="entry_container">
              <div class="entry"> Canada, Swipe me right ==></div>
            </div>
          </div>
      </li>
      <li>
        <div class="row_container">
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></svg>
          </div>
          <div class="bg"></div>
          <div class="row">
            <div class="entry_container">
              <div class="entry"> United States, Swipe me right ==></div>
            </div>
          </div>
      </li>
      <li>
        <div class="row_container">
          <div class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none" />
              <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" /></svg>
          </div>
          <div class="bg"></div>
          <div class="row">
            <div class="entry_container">
              <div class="entry"> Costa Rica, Swipe me right ==></div>
            </div>
          </div>
      </li>
    </ul>
  </section>

  <section id="info">

    <div id="chips">
      <div id="indicator"></div>
      <ul class="">
        <li> 1
        <li> 2
        <li> 3
        <li> 4
        <li> 5
        <li> 6
      </ul>
    </div>

    <div id="images">
      <div id="images_container">
        <figure class="figure">
          <img src="http://source.unsplash.com/XsAv0ItdT5w">
        </figure>
        <figure class="figure">
          <img src="http://source.unsplash.com/AJgFLjnmSs4">
        </figure>
        <figure class="figure">
          <img src="http://source.unsplash.com/-YOvMSD7LbQ">
        </figure>
        <figure class="figure">
          <img src="http://source.unsplash.com/DE4T0fOApF0">
        </figure>
        <figure class="figure">
          <img src="http://source.unsplash.com/JMYBetGDIKY">
        </figure>
        <figure class="figure">
          <img src="http://source.unsplash.com/tZpmdFfU5gQ">
        </figure>
      </div>
    </div>

    <div id="tabs">
      <ul class="horizontal">
        <li>
          <p>Brazil</p>
        <li>
          <p>Mexico</p>
        <li>
          <p>Canada</p>
        <li>
          <p>United States</p>
        <li>
          <p>Costa Rica</p>
        <li style="margin-right: 0;">
          <p>Argentina</p>
      </ul>
    </div>
  </section>

</body>


<script src="app.js"></script>

<script>
  // redirect to https since AnimationWorklet is only availably in secure contexts.
  if (location.hostname != 'localhost' && location.protocol != 'https:') {
    location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
  }

  // A simple router.
  function gotoPage() {
    var pageName = '#list';
    if (location.hash.trim().length != 0)
      pageName = location.hash.trim();

    const page = document.body.querySelector(`section${pageName}`);
    if (!page)
      return;
    // hide all except the page of interest
    document.body.querySelectorAll('section').forEach(s => { s.style.display = 'none'; });
    page.style.display = '';
    if (pageName == '#info')
      loadInfoPageAnimations();
    else
      loadListPageAnimations();
  }
  window.addEventListener('hashchange', gotoPage);

  // Load worklet and goto the page.
  (async function () {
    if (!CSS.animationWorklet) {
      console.warn('Missing CSS.animationWorklet. To enable scroll effect please load in HTTPS and enable flag chrome://flags/#enable-experimental-web-platform-features');
      document.body.innerHTML = 'Missing <tt>CSS.animationWorklet</tt>. <br/> To enable demo please enable Chrome flag chrome://flags/#enable-experimental-web-platform-features and load on HTTPS'
      return;
    }
    console.log('Loading animation worklet...');
    await CSS.animationWorklet.addModule('app-animator.js');
    gotoPage();
  })();
</script>

</html>